<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <script type="text/javascript" src="../layui/layui.js"></script>
    <style>
		/*设置此处表格可以自适应图片大小*/
		.layui-table-cell{
			display:table-cell;
			vertical-align: middle;
		}
	</style>
</head>
<body>
<!--分页表格-->
    <table id="user" lay-filter="user"></table>
    <script type="text/javascript">
        layui.use("table", function () {
            var table = layui.table;
            var $ = layui.jquery;
            table.render({
                elem: "#user",
                cols: [[
                    {type:"checkbox"},//批量删除选择框
                    {field: "id", title: "编号", sort: true, width: 120},//fixed：冻结窗格   , fixed: "left"
                    {field: "name", title: "姓名"},
                    {field: "sex", title: "性别",templet: function (d) {
                            //console.log(d);
                            return d.sex == 0 ? "女":"男";
                        }},
                    {field: "photo", title: "照片",templet:"#imgtemp"},
                    {field: "birthDay", title: "生日"},
                    {field: "email", title: "邮箱", width: 300},
                    {title:"操作",toolbar:"#operation"}]],
                url: "queryUserByPage",
                page: true,//开启分页
                limits:[5,10,20],//每页条数的选择项
                limit:5,//每页显示的条数，默认：10
                toolbar:"#tool"
            });
        })
    </script>
<!-- 定义图像模板 d为filed中的返回参数,url为后台中每一组元素的url -->
    <script type="text/html" id="imgtemp">
        <div><img src="{{d.photo}}" style="width:60px;height:50px"></div>
    </script>
<!--修改删除操作按钮-->
    <script id="operation" type="text/html">
        <button class="layui-btn layui-btn-xs" lay-event="edit">修改</button>
        <button class="layui-btn layui-btn-xs" lay-event="remove">删除</button>
    </script>
<!--工具栏按钮-->
<script type="text/html" id="tool">
    <button class="layui-btn layui-btn-xs" onclick="handleRemoveAny()">删除选中<i class="layui-icon layui-icon-delete"></i></button>
    <button class="layui-btn layui-btn-xs" onclick="openAddModal()">添加<i class="layui-icon layui-icon-addition"></i></button>
    <div class="layui-inline">
        <form action="" class="layui-form">
            <div class="layui-input-inline">
                <select name="column" id="column">
                    <option value="name" selected>姓名</option>
<!--                    <option value="age" >年龄</option>-->
                    <option value="email">邮箱</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="value" id="search" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"> </i></button>
            </div>
        </form>
    </div>
</script>
<!--添加功能表单-->
    <script id="addForm" type="text/html">
        <form class="layui-form" action="" lay-filter="addForm">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div>
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="date" name="birthDay" required  lay-verify="required" placeholder="请选择出生日期" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >邮箱</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <img id="addImg"  width="120px" height="150px">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block" style="width:200px">
                    <button type="button" id="addPhotoBtn" class="layui-btn">
                        <i class="layui-icon layui-icon-upload"></i>上传图片
                    </button>
                    <input type="hidden" name="photo" id="addPhoto" />
                </div>
            </div>

        </form>
    </script>
<!--渲染添加弹出框-->
    <script type="text/javascript">
        //执行弹出弹出层的代码
        function openAddModal(){
            layui.use(["layer","form",'upload'],function(){
                var layer = layui.layer;
                var $ = layui.$;
                var form = layui.form;
                var table = layui.table;
                var upload = layui.upload;

                layer.open({
                    type:1,
                    content:$("#addForm").html(),
                    btn:["添加","取消"],
                    area: ['400px', '500px'],
                    success:function(){
                        //如有依赖layui元素的控件，需要在此处添加渲染
                        form.render("radio","addForm");

                        <!-- 在此处渲染文件上传  文件上传 -->
                        var uploadInst = upload.render({
                            elem: '#addPhotoBtn' //绑定元素
                            ,url: 'uploadPhoto' //上传接口
                            ,field: "photo"//设置上传的参数名
                            ,done: function(res){
                                //上传完毕回调
                                // console.log(res.path);
                                $("#addPhoto").val("../images/"+res.path);
                                // $("#addPhoto").prop("value",res.path);
                                $("#addImg").prop("src","../images/"+res.path);
                            }
                            ,error: function(){
                                //请求异常回调
                            }
                        });
                    },
                    //yes函数为点击添加按钮触发
                    yes:function(index,layobj){//index：弹出层标识，layobj：触发事件的对象
                        //获取表单中所有的数据
                        var o =  form.val("addForm");
                        console.log(o);
                        $.ajax({
                            "url":"addUser",
                            "data":JSON.stringify(o),
                            "type":"post",
                            "contentType":"application/json",
                            "dataType":"json",
                            "success":function(result){
                                if (result.status == "success") {
                                    table.reload("user");
                                    layer.close(index);
                                }
                            }
                        })
                    }

                });
            })
        }
    </script>
<!--条件搜索-->
    <script type="text/javascript">
        function handleSearch(){
            var $ = layui.jquery;
            //获取条件
            var column = $("#column").val();
            var key = $("#search").val();
            //根据条件，发起请求，重新加载页面
            layui.use("table",function(){
                var table = layui.table;
                table.reload("user",{
                    url: "queryUserByPage",
                    where:{
                        "value":key,
                        "column":column
                    }
                })
            })
        }
    </script>
<!--修改功能表单-->
    <script id="updateForm" type="text/html">
        <form class="layui-form" action="" lay-filter="updateForm">
            <div class="layui-form-item">
                <input type="hidden" name="id">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div>
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="0" title="女">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">生日</label>
                <div class="layui-input-block" style="width:200px">
                    <input id="timeTest" type="date" name="birthDay" required  lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" >邮箱</label>
                <div class="layui-input-block" style="width:200px">
                    <input type="text" name="email" required  lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <img id="updateImg"  width="120px" height="150px">
                <label class="layui-form-label">上传图片</label>
                <div class="layui-input-block" style="width:200px">
                    <button type="button" id="updatePhotoBtn" class="layui-btn">
                        <i class="layui-icon layui-icon-upload"></i>上传图片
                    </button>
                    <input type="hidden" name="photo" id="updatePhoto" />
                </div>
            </div>

        </form>
    </script>
<!--对更新表单的渲染-->
    <script type="text/javascript">
        layui.use("table",function(){
            var table = layui.table;
            var $ = layui.jquery;
            //监听表格的工具按钮的事件
            table.on("tool(user)",function(obj){
                if(obj.event == "edit"){//如果触发事件的按钮是edit按钮
                    //更新操作
                    //弹出弹出层
                    layui.use(["layer","form","upload"],function(){
                        var layer = layui.layer;
                        var form = layui.form;
                        var upload = layui.upload;
                        layer.open({
                            type:1,
                            area: ['500px', '500px'],
                            content:$("#updateForm").html(),//弹出框内容为id="updateForm"的表单
                            success:function(){
                                //渲染需要渲染的表单控件
                                form.render("radio","updateForm");
                                form.val("updateForm",obj.data);
                                $("#updateImg").prop("src",obj.data.photo);
                                <!--在此处渲染文件上传  文件上传-->
                                var uploadUpdate = upload.render({
                                    elem: '#updatePhotoBtn' //绑定元素
                                    ,url: 'uploadPhoto' //上传接口
                                    ,field: "photo"//设置上传的参数名
                                    ,done: function(res){
                                        //上传完毕回调
                                        $("#updatePhoto").val("../images/"+res.path);
                                        $("#updateImg").prop("src","../images/"+res.path);
                                    }
                                    ,error: function(){
                                        //请求异常回调
                                    }
                                });

                            },
                            btn:["更新","取消"],
                            yes:function(index,layobj){
                                var updateData = form.val("updateForm");
                                $.ajax({
                                    "url":"updateUser",
                                    "type":"post",
                                    "data":JSON.stringify(updateData),
                                    "contentType":"application/json",
                                    "dataType":"json",
                                    "success":function(result){
                                        if(result.status == "success"){
                                            table.reload("user");
                                        }
                                        layer.close(index);
                                    }
                                })
                            }
                        })
                    })
                }else if(obj.event == "remove"){
                    layui.use(["layer"],function(){
                        var layer = layui.layer;
                        layer.open({
                            type:1,
                            content:"确认要删除吗？",
                            btn:["确认","取消"],
                            yes:function(index,layobj){
                                console.log(obj.data);
                                $.ajax({
                                    "url":"deleteById?id="+obj.data.id,
                                    "success":function(result){
                                        if(result.status == "success"){
                                            table.reload("user");
                                        }
                                        layer.close(index);
                                    }
                                })
                            }
                        })
                    })
                }
            })
        })
    </script>
<!--批量删除-->
    <script type="text/javascript">
        function handleRemoveAny(){
            layui.use(["layer","table"],function(){
                //获取所有选中行的id
                var layer = layui.layer;
                var table = layui.table;
                var $ = layui.jquery;
                //根据表格id值获取所有选中的行
                var status = table.checkStatus("user");
                console.log(status);
                status.data;//获取到所有选中行的数据
                var ids = [];
                for(var i = 0; i < status.data.length; i++){
                    ids[i] = status.data[i].id;
                }
                if(ids.length > 0){
                    layer.open({
                        type:1,
                        content:"确认要删除吗？",
                        btn:["确认","取消"],
                        yes:function(index,layobj){
                            //发起ajax删除请求
                            $.ajax({
                                "url":"deleteByIds",
                                "type":"delete",
                                "contentType":"application/json",
                                "data":JSON.stringify(ids),
                                "dataType":"json",
                                "success":function(result){
                                    if(result.status == "success") {
                                        table.reload("user");
                                        layer.close(index);
                                    }
                                }
                            })
                        }
                    })
                }
            })
        }
    </script>
</body>
</html>